<template>
  <a-row :gutter="10" class="width-100">
    <a-col :span="24" class="p-md">
      <a-button class="ml-md hidden-xs-only">
        <icon-home/>
      </a-button>
      <a-button class="ml-md hidden-xs-only" @click="changeMode">
        <IconSun v-if="mode === 'dark'"/>
        <IconMoonFill v-if="mode === 'light'"/>
      </a-button>
      <a-button type="primary" status="success" class="ml-md hidden-xs-only animate__animated animate__lightSpeedInLeft"
                @click="logo">
        雷恩博信息科技
      </a-button>
      <a-dropdown>
        <a-button class="ml-md hidden-sm-and-up">
          <icon-unordered-list/>
        </a-button>
        <template #content>
          <a-doption>
            <icon-home/>
            <span class="ml-md">One Doc</span>
          </a-doption>
          <a-doption @click="changeMode">
            <IconSun v-if="mode === 'dark'"/>
            <IconMoonFill v-if="mode === 'light'"  />
            <span class="ml-md">切换主题</span>
          </a-doption>
          <a-doption disabled="true" class="animate__animated animate__lightSpeedInLeft">雷恩博信息科技</a-doption>
        </template>
      </a-dropdown>
    </a-col>
  </a-row>
  <div style="min-height: calc(100vh - 120px)">
    <router-view></router-view>
  </div>
  <a-back-top target-container="#custom-demo" :style="{position:'absolute'}">
    <a-button>
      <icon-arrow-rise/>
    </a-button>
  </a-back-top>
</template>

<script lang="ts">

export default {
  data() {
    return {
      mode: 'light'
    }
  },
  methods: {
    logo() {
      this.$message.info({content: '嘤', position: 'bottom'})
    },
    changeMode() {
      this.$nextTick(() => {
        if (this.mode === 'dark') {
          document.body.removeAttribute('arco-theme');
          this.mode = document.body.getAttribute("arco-theme") === 'dark' ? 'dark' : 'light';
        } else {
          document.body.setAttribute('arco-theme', 'dark');
          this.mode = document.body.getAttribute("arco-theme") === 'dark' ? 'dark' : 'light';
        }
      });
    }
  }
}
</script>

<style lang="less">
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg-1);
  color: var(--color-text-1);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-gray {
  color: #999;
}

.text-gold {
  color: goldenrod;
}

.mt-md {
  margin-top: 8px !important;
}

.mt-xl {
  margin-top: 24px !important;
}

.mb-md {
  margin-bottom: 8px !important;
}

.ml-md {
  margin-left: 8px !important;
}

.mr-sm {
  margin-right: 4px !important;
}

.mr-md {
  margin-right: 8px !important;
}

.m-md {
  margin: 8px !important;
}

.p-md {
  padding: 8px !important;
}

.width-50 {
  width: 50% !important;
}

.width-100 {
  width: 100% !important;
}

</style>
